<template>
	<view class="header">
		<view class="bar">
			<image src="../../static/right-wite.png" @click="back" mode=""></image>
			<text>充值</text>
		</view>
	</view>
	<view class="box">

		<view class="box-center">
			<image src="../../static/r-tab-1.png" v-if="tabIndex==0" class="bg" mode=""></image>
			<image src="../../static/r-tab-3.png" v-if="tabIndex==1" class="bg" mode=""></image>
			<view class="tabs">
				<text class="tab" @click="bindCheckTab(0)"></text>
				<text class="tab" @click="bindCheckTab(1)"></text>
			</view>
			<view class="qrcode" v-if="tabIndex==0">
				<!-- <image src="" mode=""></image> -->
				<uv-qrcode ref="qrcode" size="247rpx" v-if="usdtConfig" :value="usdtConfig.trc20Address"></uv-qrcode>

			</view>
			<view class="trc20" v-if="tabIndex==0" @click="copy(usdtConfig.trc20Address)">
				<text class="content" v-if="usdtConfig">{{usdtConfig.trc20Address}}</text>
				<text class="copy">复制</text>
			</view>
			<!-- <text class="title" v-if="tabIndex==1">账户信息</text>
			<view class="bank" v-if="tabIndex==1">
				<text>银行：工商银行</text>
				<text>账号：4726362636363</text>
				<text>姓名：朝天娇</text>
			</view> -->
			<text class="ts" v-if="tabIndex==0">USDT链上转账到账时间约2~10分钟，现金审核时间AM:8:00~PM:18:00</text>
			<!-- <text class="ts" style="margin-bottom: 0;" v-if="tabIndex==1">USDT人民币汇率 1USDT=7.17CNY</text> -->
			<!-- <text class="ts" style="margin-top: 0;" v-if="tabIndex==1">现金充值请按当前汇率转账(如:充值100USDT，转账金额为717)</text> -->
			<view class="xj-box" v-if="tabIndex==1">
				<view class="top">
					<text class="title">请联系客服</text>
					<text class="dys">现金充值请添加客服微信 </text>
				</view>
				<view style="font-size: 20rpx; margin-top: -10rpx;">*实时欧意汇率1U={{(ouyi*1).toFixed(3)}}人民币</view>
				<view class="wx" v-for="(item,index) in rmbConfig" :key="index" @click="copy(item)">
					<text>{{item}}</text>
					<text>复制</text>
				</view>
				
				
				
				
			</view>
			<text class="title" v-if="tabIndex==0">充值金额</text>
			<view class="money" v-if="tabIndex==0">
				<text>U</text>
				<input type="text" placeholder="0.00" v-model="rechargeDAO.amount" class="amount-input"
					placeholder-style="color:#BEBFC4" />
			</view>
			<view class="amount-ts" v-if="tabIndex==0">
				<text>提示:当前USDT余额为</text>
				<text style="color: #FF984D;" v-if="userData">${{userData.balance}}</text>
			</view>
			<text class="title" v-if="tabIndex==0">交易单号(hash)</text>
			<input type="text" v-if="tabIndex==0" placeholder="请输入交易单号" v-model="rechargeDAO.hash"
				placeholder-style="color:#BEBFC4" class="orderno" />
			<text class="title" v-if="tabIndex==0">上传凭证</text>
			<view class="pic-box" v-if="tabIndex==0">
				<image :src="item" v-for="(item,index) in rechargeDAO.evidence" :key="index" mode="" class="add-pic"
					@click="showSheet(index)"></image>
				<image src="../../static/add-pic.png" class="add-pic" v-if="rechargeDAO.evidence.length==0" mode="" @click="bindChoose"></image>
			</view>

		</view>
	</view>
	<button class="btn" v-if="tabIndex==0" @click="bindUsdtSubmit">提交审核</button>
	<button class="btn" v-if="tabIndex==1" @click="bindBankSubmit">在线联系</button>
	<view style="height: 80rpx;">

	</view>
	<!-- <uni-pay ref="pay" :rechargeDAO="rechargeDAO" @bindPassWord="confirm"></uni-pay> -->
</template>

<script setup>
	
	import {
		getouyi,
		rechargeApply,
		user,
		fileUpload,
		constantGet
	} from '@/util/api.js'
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'
	const pay = ref()
	const rechargeDAO = ref({
		"amount": '',
		"evidence": [],
		"hash": "",
		"transactionPassword": "",
		"type": "usdt"
	})
	onShow(() => {
        getOi()
		getUser()
		getRmbConfig()
		getUsdtConfig()
	})
	const tabIndex = ref(0)
	const userData = ref()
	const rmbConfig = ref()
	const usdtConfig = ref()
	const ouyi = ref()
	const bindCheckTab = (index) => {
		tabIndex.value = index
	}
	const back = () => {
		uni.navigateBack()
	}
	const bindUsdtSubmit = async() => {
		if(!rechargeDAO.value.amount){
			uni.showModal({
				title:"提示",
				content:"请输入充值金额",
				showCancel:false
			})
			return false;
		}
		if(!rechargeDAO.value.hash){
			uni.showModal({
				title:"提示",
				content:"请输入交易单号",
				showCancel:false
			})
			return false;
		}
		if(rechargeDAO.value.evidence.length==0){
			uni.showModal({
				title:"提示",
				content:"请上传凭证",
				showCancel:false
			})
			return false;
		}
		uni.showLoading({
			mask:true,
			 
		})
		const result = await rechargeApply(rechargeDAO.value)
		uni.hideLoading()
		if(result.code==200){
			uni.showModal({
				title:"提示",
				content:"操作成功",
				showCancel:false,
				success: () => {
					uni.navigateBack()
				}
			})
		}
		
	}
	
	const bindBankSubmit = () => {
		uni.navigateTo({
			url:"/pages/webViewService/webViewService"
		})
	}
	const copy = (text) => {
		uni.setClipboardData({
			data: String(text),
			success: function() {
				console.log('success');
			}
		});
	}
	// 获取欧意汇率
	const getOi = async ()=>{
		
		const result = await getouyi()
		ouyi.value = JSON.parse(result.data)
	}
	// 获取人民币配置
	const getRmbConfig = async ()=>{
		const result = await constantGet({key:"rmb_pay"})
		rmbConfig.value = JSON.parse(result.data.data)
		console.log(rmbConfig.value)
	}
	// 获取USDT配置
	const getUsdtConfig = async ()=>{
		const result = await constantGet({key:"usdt_pay"})
		usdtConfig.value = JSON.parse(result.data.data)
	}
	// 选择图片
	const bindChoose = () => {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function(res) {
				uni.showLoading({
					mask:true
				})
				const token = uni.getStorageSync('token')
				const tokenHeader = uni.getStorageSync('tokenHead')
				let Authorization = tokenHeader + token
				uni.uploadFile({
					url: fileUpload(), //仅为示例，非真实的接口地址
					filePath: res.tempFilePaths[0],
					name: 'file',
					header: {
						'Authorization': Authorization
					},
					success: (uploadFileRes) => {
						let data = JSON.parse(uploadFileRes.data)
						
						rechargeDAO.value.evidence.push(data.data)
						uni.hideLoading()
					}
				});
			}
		});
	}
	// 上传文件
	const upload = async (file) => {
		const result = await fileUpload({
			file
		})
		console.log(result)
	}
	// 图片操作
	const showSheet = (index) => {
		
		uni.previewImage({
			urls: rechargeDAO.value.evidence,
			current: index,
			showmenu:true,
			indicator:true,
			longPressActions: {
				itemList: ['删除'],
				success: function(data) {
					rechargeDAO.value.evidence.splice(index,1)
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
	}
	// 获取当前登录用户信息
	const getUser = async () => {
		const result = await user()
		console.log(result)
		if (result.code == 200) {
			userData.value = result.data
		} else {
			userData.value = null
		}
	}
</script>

<style lang="scss">
	.xj-box{
		.top{
			display: flex;
			align-items: center;
			.dys{
				color: #FF984D;
				font-size: 24rpx;
				margin-left: 30rpx;
				margin-bottom: 20rpx;
			}
		}
		.wx{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx;
			text{
				color: #313646;
				font-size: 28rpx;
			}
			text:nth-of-type(2){
				color: #316BFF;
			}
		}
	}
	.bank {
		width: 596rpx;

		background: #F2F5F9;
		border-radius: 23rpx;
		margin-bottom: 20rpx;
		overflow: hidden;

		text {
			display: block;
			margin: 28rpx 20rpx;
			color: #313646;
			font-size: 28rpx;
			font-weight: bold;
		}
	}

	.btn {
		width: 673rpx;
		height: 92rpx;
		background: linear-gradient(180deg, #4D75F6 0%, #7FA1F8 100%);
		border-radius: 23rpx;
		margin: 50rpx auto;
		display: block;
		color: #fff;
		font-size: 30rpx;
		line-height: 92rpx;
	}

	.pic-box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-right: -20rpx;
	}

	.add-pic {
		display: block;
		width: 196rpx;
		height: 196rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.orderno {
		display: block;
		width: 596rpx;
		height: 92rpx;
		background: #F2F5F9;
		border-radius: 23rpx;
		margin: 0 0 38rpx;
		text-indent: 30rpx;
	}

	.amount-ts {
		margin: 0 0 38rpx 0;

		text {
			color: #BEBFC4;
			font-size: 24rpx;
		}
	}

	.money {
		width: 596rpx;
		height: 154rpx;
		background: #F2F5F9;
		border-radius: 23rpx;
		margin: 0 0 20rpx;
		display: flex;
		align-items: center;

		text {
			display: block;
			font-size: 36rpx;
			color: #313646;
			margin-left: 20rpx;
			margin-right: 14rpx;
			font-weight: 800;
		}

		.amount-input {
			display: block;
			height: 100%;
			font-size: 58rpx;
			font-weight: 800;
			color: #333;
		}
	}

	.title {
		margin: 0 0 30rpx 0;
		color: #313646;
		font-size: 28rpx;
		font-weight: 800;
		display: block;
	}

	.ts {
		display: block;
		margin: 20rpx 0 38rpx;
		color: #999;
		font-size: 24rpx;
	}

	.trc20 {
		margin: 38rpx auto;
		width: 536rpx;
		// height: 154rpx;
		background: #F2F5F9;
		border-radius: 23rpx;
		overflow: hidden;
		padding: 0 30rpx 30rpx;

		.content {
			color: #313646;
			font-size: 28rpx;
			display: block;
			margin-top: 38rpx;
			width: 100%;
			white-space: pre-wrap;

			word-wrap: break-word;
		}

		.copy {
			display: block;
			text-align: right;
			color: #316BFF;
			font-size: 28rpx;
			margin-top: 23rpx;
		}
	}

	.qrcode {
		width: 269rpx;
		height: 269rpx;
		background: #FFFFFF;
		border-radius: 23rpx;
		border: 2rpx solid #E3E5E8;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			display: block;
			width: 248rpx;
			height: 248rpx;
			background: pink;
		}
	}

	.tabs {

		display: flex;
		position: absolute;
		left: 0;
		top: 0;

		z-index: 99;

		.tab {
			display: block;
			width: 337rpx;
			height: 142rpx;

		}
	}

	.box-center {
		position: relative;
		padding: 0 38rpx 0;
		margin: 0 38rpx;
		background: #FFFFFF;
		box-shadow: 0px 15rpx 38rpx 0px rgba(49, 54, 70, 0.06);
		border-radius: 23rpx 23rpx 23rpx 23rpx;
		padding-bottom: 38rpx;
	}

	.bg {
		display: block;
		width: 674rpx;
		margin-left: -38rpx;
		height: 142rpx;
	}

	.box {
		position: relative;
		margin-top: -208rpx;
		overflow: hidden;
	}

	.header {
		width: 750rpx;
		height: 408rpx;
		background: url(/static/r-icon.png) no-repeat;
		background-size: cover;
		overflow: hidden;

		.bar {
			height: 92rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			margin-top: 88rpx;

			text {
				color: #fff;
				font-size: 36rpx;
			}

			image {
				position: absolute;
				width: 46rpx;
				height: 46rpx;
				left: 38rpx;
				transform: rotate(180deg);
			}
		}
	}
</style>